import React from 'react'

const Card = props => {
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
  }

  var spanStyle = {
    position: 'absolute',
    left: '0',
    height: '100%',
    width: '7px',
    background: `rgb(${getRandom(0, 255)}, ${getRandom(0, 255)}, ${getRandom(
      0,
      255
    )})`,
  }

  return (
    <>
      <div
        style={{
          position: 'relative',
          width: '95vw',
          height: '45px',
          display: 'flex',
          margin: '12px 0',
          justifyContent: 'space-between',
          alignItems: 'center',
          background: 'white',
          borderRadius: '24px',
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <span style={spanStyle} />
          <img
            style={{
              width: '9vw',
              height: '9vw',
              borderRadius: '50%',
              marginLeft: '10px',
            }}
            src={props.imgUrl}
            alt=""
          />
          <h3
            style={{
              fontSize: '17px',
              fontWeight: 700,
              marginLeft: '8px',
            }}
          >
            {props.title}
          </h3>
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <i
            style={{
              color: '#c1bcbc',
            }}
            className="iconfont icon-naozhong"
          />
          <span
            style={{
              color: '#c1bcbc',
              margin: '0 12px',
            }}
          >
            {props.time}
          </span>
        </div>
      </div>
    </>
  )
}

export default Card
